<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import ReportList from './components/reportList.vue';
import Steps from './components/steps.vue';

enum PRINT_TYPE {
  REPORT,
  PUBLISH,
  TICKET
}

const printTypes = ref([
  {
    label: '报告打印',
    value: PRINT_TYPE.REPORT
  },
  {
    label: '发票打印',
    value: PRINT_TYPE.PUBLISH
  },
  {
    label: '凭条打印',
    value: PRINT_TYPE.TICKET
  }
]);

const printType = ref(PRINT_TYPE.REPORT);

function onSelectPrintType(type: PRINT_TYPE) {
  printType.value = type;
}
</script>

<template>
  <view class="print-service flex-col">
    <Steps />
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="print-service__title mt-50">
        选择打印类型
      </view>
      <view class="print-service__subtitle mt-16">
        请选择需要打印的报告类型（可多选）
      </view>
      <view class="print-type mt-40 flex items-center justify-between">
        <view class="print-type__group flex items-center">
          <view
            v-for="item in printTypes"
            :key="item.value"
            class="print-type__item"
            :class="{ active: printType === item.value }"
            @click="onSelectPrintType(item.value)"
          >
            {{ item.label }}
          </view>
        </view>
        <view class="print-type__all">
          <wd-checkbox shape="square" :model-value="true">
            全选
          </wd-checkbox>
        </view>
      </view>
      <view>
        <!-- 报告列表 -->
        <ReportList v-if="printType === PRINT_TYPE.REPORT" />
      </view>
      <view />
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '打印服务',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.print-service {
  height: 100%;
  background-color: var(--bg-color);

  .print-service__title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);

    text-align: center;
  }

  .print-service__subtitle {
    color: var(--secondary-text-color);
    font-size: 28px;
    text-align: center;
  }

  .print-type {
    background: linear-gradient(180deg, #d8e7ff 40%, #afceff 100%);
    padding: 26px 46px;

    .print-type__group {
      .print-type__item {
        border-radius: 10px;
        background: rgba(247, 250, 254, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.5);
        margin-right: 20px;
        font-size: 30px;
        padding: 13px 42px;
        &.active {
          background: #ffffff;
          color: var(--primary);
          font-weight: bold;
        }
      }
    }

    .print-type__all {
      --wot-checkbox-label-fs: 30px;
      --wot-checkbox-size: 32px;
      --wot-checkbox-label-color: #1b1c1e;
      --wot-checkbox-icon-size: 32px;
      --wot-checkbox-checked-color: var(--primary);
      font-size: 30px;

      :deep(.wd-checkbox) {
        .wd-checkbox__txt {
          line-height: 40px;
        }
      }
    }
  }
}
</style>
